<template>
	<view class="rule">
		<view class="title">
			引用法律条文
		</view>
		<view class="content">
			<view class="uni-container">
				<uni-table ref="table" :loading="loading" border stripe type="" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">法律名称</uni-th>
						<uni-th width="150" align="center">来源</uni-th>
						<uni-th align="center">生成时间</uni-th>
						<uni-th width="204" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="item.data">
						<uni-td>{{ item.date }}</uni-td>
						<uni-td>
							<view class="name">{{ item.name }}</view>
						</uni-td>
						<uni-td align="center">{{ item.address }}</uni-td>
						<uni-td>
							<view class="uni-group">
								<button class="uni-button" size="mini" type="warn">删除</button>
								<button class="uni-button" size="mini" type="primary">详情</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
						:total="total" @change="change" /></view>
			</view>
		</view>
		<view class="footer">
			<view class="fbox">
				<view class="reset" @click="addItem">
					手动添加
				</view>
			</view>
			<view class="fbox">
				<view class="save" @click="save">
					保存
				</view>
			</view>
		</view>

		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="手动添加" value="对话框预置提示内容!" @confirm="dialogInputConfirm">
				<uni-easyinput type="textarea" v-model="mess" placeholder="请输入法规内容" />
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mess: '',
				searchVal: '',
				tableData: [{
					"date": "2020-09-01",
					"name": "Dcloud1",
					"address": "上海市普陀区金沙江路 1518 弄"
				}, {
					"date": "2020-09-02",
					"name": "Dcloud2",
					"address": "上海市普陀区金沙江路 1517 弄"
				}, {
					"date": "2020-09-03",
					"name": "Dcloud3",
					"address": "上海市普陀区金沙江路 1519 弄"
				}, {
					"date": "2020-09-04",
					"name": "Dcloud4",
					"address": "上海市普陀区金沙江路 1516 弄"
				}, {
					"date": "2020-09-05",
					"name": "Dcloud5",
					"address": "上海市普陀区金沙江路 1518 弄"
				}],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		mounted() {
			this.save()
		},
		methods: {
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)
			},
			addItem() {
				this.$refs.inputDialog.open()
			},
			save() {
				this.tableData = [{
					"date": "2020-09-01",
					"name": "Dcloud1",
					"address": "上海市普陀区金沙江路 1518 弄"
				}]
			},
			// 分页触发
			change(e) {},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent) {
				this.loading = true
				this.pageCurrent = pageCurrent

				let xxx = []

				this.tableData = xxx
				this.total = 5
				this.loading = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.rule {
		width: 100%;
		height: 100%;

		.title {
			height: 140rpx;
			line-height: 140rpx;
			padding-left: 40rpx;
			font-size: 48rpx;
			border-bottom: 1px solid rgb(234, 239, 244);
			background-color: #fff;
		}


		.footer {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.fbox {
				flex: 1;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.reset {
				border-radius: 5px;
				padding: 10rpx 0px;
				width: 80%;
				background-color: rgb(168, 171, 178);
			}

			.share {
				border-radius: 5px;
				padding: 10rpx 0px;
				width: 60%;
				background-color: #FFA100;
			}

			.save {
				border-radius: 5px;
				padding: 10rpx 0px;
				width: 60%;
				background-color: #1989FA;
			}
		}
	}

	.content {
		width: 100%;
		height: calc(100vh - 280px);
		overflow: scroll;
		background-color: #fff;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
</style>